<template>
    <div class="content d-flex overflow-hidden">
        <div class="left h-100 overflow-auto" style="width: 500px;">
            <PatientList @makeOrder="makeOrder"></PatientList>
        </div>
        <div class="flex-1 right h-100 overflow-auto">
            <el-descriptions title="基本信息" style="padding: 0 8px;">
                <el-descriptions-item label="患者ID" >{{ activePatient.patientId }}</el-descriptions-item>
                <el-descriptions-item label="姓名" >{{ activePatient.patientName }}</el-descriptions-item>
                <el-descriptions-item label="性别" >{{ activePatient.gender ? '男' : '女' }}</el-descriptions-item>
                <el-descriptions-item label="就诊号" >{{ activePatient.visitNo }}</el-descriptions-item>
                <el-descriptions-item label="主诉" >{{ activePatient.chiefComplaint }}</el-descriptions-item>
                <el-descriptions-item label="现病史" >{{ activePatient.presentIllness }}</el-descriptions-item>
            </el-descriptions>
            <template v-if="activePatient.visitId">
                <div class="title">诊断信息</div>
                <DiagnosisAdd style="margin-top: 12px;" :key="activePatient.visitId" :visitId="activePatient.visitId" :patientId="activePatient.patientId"></DiagnosisAdd>
                <div class="title">医嘱信息</div>
                <OrderItemAdd style="margin-top: 12px;" :key="activePatient.visitId" :visitId="activePatient.visitId" :patientId="activePatient.patientId"></OrderItemAdd>
                <div class="title">病历信息</div>
                <MedicalRecordAdd style="margin-top: 12px;" :key="activePatient.visitId" :visitId="activePatient.visitId" :patientId="activePatient.patientId"></MedicalRecordAdd>
            </template>

        </div>
    </div>
</template>
<script>
import PatientList from "./components/patientList.vue"
import DiagnosisAdd from "./components/diagnosisAdd.vue"
import OrderItemAdd from "./components/orderItemAdd.vue"
import MedicalRecordAdd from "./components/medicalRecordAdd.vue"


export default {
    components: {PatientList, DiagnosisAdd, OrderItemAdd, MedicalRecordAdd},
    data() {
        return {
            activePatient: {}
        }
    },
    methods: {
        makeOrder(data) {
            this.activePatient = data;

        }
    },
}

</script>
<style lang="scss" scoped>
.content {
    height: 100%;
}
.title {
    font-size: 16px;
    font-weight: bold;
    margin: 6px 6px;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
</style>